<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>zss-ol-map 示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@8.2.0/ol.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    #app {
      display: flex;
      height: 100vh;
    }

    #sidebar {
      width: 300px;
      background: #f5f5f5;
      padding: 20px;
      overflow-y: auto;
      border-right: 1px solid #ddd;
    }

    #map {
      flex: 1;
      height: 100vh;
    }

    .section {
      margin-bottom: 20px;
    }

    .section h3 {
      margin-bottom: 10px;
      color: #333;
      font-size: 16px;
    }

    .button-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    button {
      padding: 10px 15px;
      background: #3399CC;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.3s;
    }

    button:hover {
      background: #2980b9;
    }

    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .info {
      background: white;
      padding: 10px;
      border-radius: 4px;
      margin-top: 10px;
      font-size: 12px;
      color: #666;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="sidebar">
      <h2>zss-ol-map 示例</h2>
      
      <div class="section">
        <h3>地图类型</h3>
        <div class="button-group">
          <button onclick="switchMapType('gaode')">高德地图</button>
          <button onclick="switchMapType('baidu')">百度地图</button>
          <button onclick="switchMapType('osm')">OpenStreetMap</button>
        </div>
      </div>

      <div class="section">
        <h3>聚合图层</h3>
        <div class="button-group">
          <button onclick="addClusterLayer()">添加聚合图层</button>
          <button onclick="updateClusterData()">更新数据</button>
          <button onclick="removeClusterLayer()">移除图层</button>
        </div>
      </div>

      <div class="section">
        <h3>轨迹图层</h3>
        <div class="button-group">
          <button onclick="addTrackLayer()">添加轨迹图层</button>
          <button onclick="playTrack()">播放轨迹</button>
          <button onclick="pauseTrack()">暂停</button>
          <button onclick="stopTrack()">停止</button>
        </div>
      </div>

      <div class="section">
        <h3>热力图图层</h3>
        <div class="button-group">
          <button onclick="addHeatmapLayer()">添加热力图</button>
          <button onclick="updateHeatmapData()">更新数据</button>
          <button onclick="removeHeatmapLayer()">移除图层</button>
        </div>
      </div>

      <div class="section">
        <h3>矢量图层</h3>
        <div class="button-group">
          <button onclick="addVectorLayer()">添加矢量图层</button>
          <button onclick="removeVectorLayer()">移除图层</button>
        </div>
      </div>

      <div class="section">
        <h3>弹窗和标记</h3>
        <div class="button-group">
          <button onclick="addMarker()">添加标记点</button>
          <button onclick="showPopup()">显示弹窗</button>
          <button onclick="clearMarkers()">清除标记</button>
        </div>
      </div>

      <div class="section">
        <h3>测量工具</h3>
        <div class="button-group">
          <button onclick="startMeasureDistance()">距离测量</button>
          <button onclick="startMeasureArea()">面积测量</button>
          <button onclick="stopMeasure()">停止测量</button>
          <button onclick="clearMeasure()">清除测量</button>
        </div>
      </div>

      <div class="section">
        <h3>搜索工具</h3>
        <div class="button-group">
          <button onclick="initSearch()">初始化搜索</button>
          <button onclick="testGeocode()">地理编码测试</button>
          <button onclick="testReverseGeocode()">逆地理编码测试</button>
        </div>
      </div>

      <div class="section">
        <h3>路线规划</h3>
        <div class="button-group">
          <button onclick="initRoute()">初始化路线</button>
          <button onclick="testRoute()">规划路线</button>
          <button onclick="clearRoute()">清除路线</button>
        </div>
      </div>

      <div class="section">
        <h3>控件</h3>
        <div class="button-group">
          <button onclick="addFullScreen()">添加全屏控件</button>
        </div>
      </div>

      <div class="section">
        <div class="info" id="info">
          点击按钮测试各种功能
        </div>
      </div>
    </div>
    <div id="map"></div>
  </div>
  <script type="module" src="/main.js"></script>
</body>
</html>

